<template>
  <div class="zhanghao">
    <input type="text" class="ID" placeholder="请输入手机号或邮箱" v-model="id_in" @input="la">
    <input type="password" class="pwd" placeholder="请输入密码" v-model="pwd_in" @input="la">
    <button type="button">
      <!-- <router-link to="" v-if="h">登录</router-link> -->
      <router-link :to="path">登录</router-link>
    </button>
    <div class="aside">
      <router-link to="/forget">忘记密码?</router-link> |
      <router-link to="/register">立即注册</router-link>
    </div>
    <div class="other">
      <p>使用以下方式快速登录</p>
      <div class="img"><img src="../../assets/img/mine/weibo.png" alt=""></div>
    </div>
  </div>
</template>
<script>
export default{
  name: '',
  data () {
    return {
      id_in: '',
      pwd_in: '',
      path: ''
    }
  },
  methods: {
    la () {
      if(this.id_in == '123456' && this.pwd_in == 'aaabbb'){
        this.path = '/mine'
      }
    }
  }
}
</script>
<style scoped lang="less">
  .zhanghao{
    .ID{
      display: block;
      width: 80%;
      height: 30px;
      margin: 50px auto;
      border: none;
      border-bottom: 1px solid #666;
      outline: none;
    }
    .pwd{
      display: block;
      width: 80%;
      height: 30px;
      margin: 50px auto;
      border: none;
      border-bottom: 1px solid #666;
      outline: none;
    }
    button{
      display: block;
      width: 80%;
      height: 40px;
      margin: 50px auto 20px;
      font-size: 1.1em;
      background-color: #000;
      border: none;
      a{
        display: block;
        color: #fff;
      }
    }
    .aside{
      text-align: center;
      font-size: 0.9em;
      a{
        color: #444;
        margin: 0 16px;
      }
    }
    .other{
      text-align: center;
      margin: 50px 0 0;
      p{
        margin: 0;
        font-size: 0.9em;
      }
      .img{
        width: 40px;
        height: 40px;
        border: 1px solid #000;
        border-radius: 20px;
        margin: 20px auto;
        img{
          width: 30px;
          margin: 5px;
        }
      }
    }
  }
</style>